Для каких целей грид и флекс
Мы не хотим противопоставлять эти две технологии, но без сравнений не обойтись.
Игра тренажер по flex
Пройдите игру для наглядного понимания flex технологии.
Флексбокс-вёрстка
Инструменты вёрстки были придуманы для книг и журналов.
display: flex;
display: inline-flex;
display: inline-flex;
Flex контейнер
Как задать flex контейнер. Flex – это целый модуль, который состоит из свойств как для дочерних
элементов этого контейнера так и для родительских элементов.
flex-direction
Направление отображения элементов в флексе
По умолчанию флекс-элементы внутри контейнера отображаются в ряд слева направо в том порядке, в каком они прописаны в коде HTML -документа .
justify-content
Выравнивание элементов по основной оси x
Пустое пространство между элементами тоже нужно распределять.
align-content
Выравнивание флекс-элементов по оси y.
Свойство распределяет свободное пространство по поперечной оси между строками флекс-элементов.
align-items
Выравнивание флекс-элементов в контейнере
Элементы в контейнере flex можно размещать и по оси Y.
align-self
Выравнивание отдельного элемента
Иногда нужно, чтобы отдельный элемент не подчинялся общему правилу.
flex-wrap
Перенос элементов при сжатии окна браузера
По умолчанию флекс-контейнер делает окно "резиновым": при сжатии или расширении окна просмотра браузера отдельные флекс-элементы
margin: auto;
Выравнивание одного элемента flex по центру
Флекс-контейнер управляет не элементом, а пустотой вокруг него.
order;
флекс-элементы. Порядок размещения
Во флексбокс-вёрстке такое можно проделывать, не трогая ни HTML-код, ни CSS-правило для контейнера.
flex-basis
Свойства флекс-элементов. Базовая ширина элемента
Иногда необходимо, чтобы один флекс-элемент имел определённый размер, пока другие свойства флекс-контейнера не начнут его сжимать
flex-grow
Сколько места занимает элемент в блоке
CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»).
flex-shrink
Скорость сжатия элемента
Чем больше значение у этого свойства, тем быстрее элемент будет сжиматься по сравнению с соседями, имеющими меньшее значение если не будет хватать места в блоке.